<template>
  <div class="controller__page">

    <div class="row-1">
      <div class="panel deviceInfo">
        <div class="icon">
          <span class="iconfont icon-device"></span>
        </div>
        <div class="info">
          <div class="label">产品名</div>
          <div class="productionName">{{ detail.productionName }}</div>
          <div class="value">{{ detail.appKey }}</div>
          <div class="value">{{ detail.deviceName }}</div>
        </div>
      </div>
      <div class="panel deviceStatus">
        <div class="deviceStatus__left">
          <div>
            <span class="iconfont icon-connector"></span>
            接口数
          </div>
          <div>{{ detail.chargerNum }}</div>
          <div>关联充电设备</div>
          <div>
            <span class="marker marker-error"></span>
            未关联
          </div>
        </div>
        <div class="deviceStatus__right">
          <div>
            <template v-if="detail.status === DEVICE_STATUS_OFFLINE">
              <span class="iconfont icon-offline"></span>
              <span>设备断线</span>
            </template>
            <template v-else-if="detail.status === DEVICE_STATUS_ONLINE">
              <span class="iconfont icon-online"></span>
              <span>设备在线</span>
            </template>
          </div>
          <div>
            <el-switch
              v-model="detail.status"
              :inactive-value="DEVICE_STATUS_OFFLINE"
              :active-value="DEVICE_STATUS_ONLINE"
              @change="onDeviceStatusChange">
            </el-switch>
            <span v-show="detail.status === DEVICE_STATUS_OFFLINE">断线</span>
            <span v-show="detail.status === DEVICE_STATUS_ONLINE">在线</span>
          </div>
          <div>
            <template v-if="detail.accountStatus === DEVICE_ACCOUNT_STATUS_INACTIVE">
              <span class="iconfont icon-forbidden"></span>
              <span>禁用</span>
            </template>
            <template v-else-if="detail.accountStatus === DEVICE_ACCOUNT_STATUS_ACTIVE">
              <span class="iconfont icon-play"></span>
              <span>启用</span>
            </template>
          </div>
          <div>
            <el-switch
              v-model="detail.accountStatus"
              :inactive-value="DEVICE_ACCOUNT_STATUS_INACTIVE"
              :active-value="DEVICE_ACCOUNT_STATUS_ACTIVE"
              @change="onAccountStatusChange">
            </el-switch>
            <span v-show="detail.accountStatus === DEVICE_ACCOUNT_STATUS_INACTIVE">禁用</span>
            <span v-show="detail.accountStatus === DEVICE_ACCOUNT_STATUS_ACTIVE">启用</span>
          </div>
        </div>
      </div>
      <div>
        <div class="map" ref="map"></div>
      </div>
    </div>

    <div class="row-2">
      <div class="row-2-left">
          <div class="panel deviceTime">
            <div class="deviceTime__left">
              <div>
                <div class="deviceTime-label">
                  服务器时间：
                  <div class="deviceTime-time">{{ format_dateTime(detail.serverTime) }}</div>
                </div>
                <div>
                  设备时差：
                  <span class="seconds">{{ detail.serverTimeDiff }}</span>秒
                </div>
              </div>
              <div>
                <el-button type="primary"><i class="iconfont icon-timer"></i>设备校时</el-button>
              </div>
            </div>
            <div class="deviceTime__right">
              <div>
                <div class="deviceTime-label">
                  最近一次重启时间：
                  <div class="deviceTime-time">{{ format_dateTime(detail.serverRestartTime) }}</div>
                </div>
                <div class="deviceTime-label">
                  设备运行时长：
                  <div class="deviceTime-time">
                    <span class="deviceTime-time-num">222</span>
                    <span>天</span>
                    <span class="deviceTime-time-num">2</span>
                    <span>时</span>
                    <span class="deviceTime-time-num">2</span>
                    <span>分</span>
                    <span class="deviceTime-time-num">2</span>
                    <span>秒</span>
                  </div>
                </div>
              </div>
              <div>
                <el-button type="primary"><i class="iconfont icon-reset"></i>重启</el-button>
              </div>
            </div>
          </div>
          <div class="panel deviceVersion">
            <div class="deviceVersion__left">
              <div class="deviceVersion__left-title">
                <div>
                  <span class="iconfont icon-timer"></span>
                  历史版本记录
                </div>
                <el-switch
                  v-model="detail.otaStatus"
                  :inactive-value="DEVICE_OTA_INACTIVE"
                  :active-value="DEVICE_OTA_ACTIVE"></el-switch>
              </div>
              <div class="deviceVersion__left-currVersion">
                <div class="deviceVersion__left-currVersion-label">当前版本</div>
                <div class="deviceVersion__left-currVersion-version">济南-R1.1</div>
                <div class="deviceVersion__left-currVersion-time">{{ format_dateTime('2022-11-21 16:12:23') }}</div>
              </div>
            </div>
            <div class="deviceVersion__right">
              <div class="deviceVersion__right-title">
                <span class="iconfont icon-info-circle"></span>
                <span>可设置版本</span>
              </div>
              <el-table :data="versionList" :show-header="false" v-loading="versionListLoading" max-height="120px">
                <el-table-column prop="name"></el-table-column>
                <el-table-column prop="edition"></el-table-column>
                <el-table-column prop="createTime" width="100">
                  <template slot-scope="{ row }">{{ format_dateTime(row.createTime) }}</template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="{ row }">
                    <el-button type="primary" size="mini" plain>设置</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="panel deviceConfig">
            <div class="deviceConfig-title">硬件配置文件版本</div>
            <div class="deviceConfig-configName">柘阳科技硬件配置R1.0</div>
            <div class="deviceConfig-createTime">{{ format_dateTime('2022-11-21 16:12:23') }}</div>
            
            <el-button type="primary" class="deviceConfig-reset-button"><i class="iconfont icon-reset"></i>恢复缺省配置</el-button>

            <div class="deviceConfig__configList">
              <div class="deviceConfig__configList-title">
                <span class="iconfont icon-device"></span>
                <span>设备配置项</span>
              </div>
              <div class="deviceConfig__configList-actions">
                <el-button type="warning" class="deviceConfig__configList-submit-button" size="mini" v-show="!isConfigEditing" @click="isConfigEditing=true">
                  <i class="iconfont icon-submit"></i>编辑
                </el-button>
                <el-button type="warning" class="deviceConfig__configList-submit-button" size="mini" v-show="isConfigEditing" @click="cancelConfigEditing">
                  <i class="iconfont icon-submit"></i>取消编辑
                </el-button>
                <el-button type="primary" class="deviceConfig__configList-submit-button" size="mini" @click="submitNewConfig"><i class="iconfont icon-submit"></i>提交</el-button>
              </div>
              <el-table :data="configList" :border="true" :show-header="false" v-loading="configListLoading" max-height="300px">
                <el-table-column prop="name"></el-table-column>
                <el-table-column prop="value">
                  <template slot-scope="{ row }">
                    <el-input v-show="isConfigEditing" v-model="row.value"></el-input>
                    <div v-show="!isConfigEditing">{{ row.value }}</div> 
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
      </div>
      <div class="row-2-right">
        <!-- 设备检查 -->
        <div class="panel deviceChecker">
          <!-- 设备检查 - 操作 -->
          <div class="actions">
            <el-button type="primary" size="mini"><i class="iconfont icon-device"></i>设备自检</el-button>
            <span class="iconfont icon-download"></span>
          </div>
          <!-- 设备检查 - 设备信息 -->
          <div class="deviceCheckerInfo__item">
            <div class="deviceCheckerInfo__item-title">
              <div class="title">
                <span class="iconfont icon-info-circle"></span>
                <span class="text">设备信息</span>
              </div>
            </div>
            <div class="deviceCheckerInfo__item-list">
              <div
                class="deviceCheckerInfo__item-list-item"
                v-for="(item ,index) in deviceInfoList"
                :key="index">
                <span class="deviceCheckerInfo__item-list-item-label">{{ item.label }}</span>
                <span class="deviceCheckerInfo__item-list-item-value">{{ detail[item.prop] }}</span>
              </div>
            </div>
          </div>
          <!-- 设备检查 - 设备注册信息 -->
          <div class="deviceCheckerInfo__item">
            <div class="deviceCheckerInfo__item-title">
              <div class="title">
                <span class="iconfont icon-register-circle"></span>
                <span class="text">设备注册信息</span>
              </div>
            </div>
            <div class="deviceCheckerInfo__item-list">
              <div
                class="deviceCheckerInfo__item-list-item"
                v-for="(item ,index) in deviceRegisterInfoList"
                :key="index">
                <span class="deviceCheckerInfo__item-list-item-label">{{ item.label }}</span>
                <span class="deviceCheckerInfo__item-list-item-value">{{ detail[item.prop] }}</span>
              </div>
            </div>
          </div>
          <!-- 设备检查 - 其他检查项 -->
          <div class="deviceCheckerInfo__item" v-for="(item, index) in deviceCheckerList" :key="index">
            <div class="deviceCheckerInfo__item-title">
              <div class="title">
                <span class="iconfont icon-check"></span>
                <span class="text">{{ item.title}}</span>
              </div>
            </div>
            <div class="deviceCheckerInfo__item-list">
              <div
                class="deviceCheckerInfo__item-list-item"
                v-for="(checkItem ,checkIndex) in item.list"
                :key="checkIndex">
                <span class="deviceCheckerInfo__item-list-item-label">{{ checkItem.label }}</span>
                <span class="deviceCheckerInfo__item-list-item-value">{{ checkItem.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>


<script>
import {
  DEVICE_STATUS_OFFLINE,
  DEVICE_STATUS_ONLINE,
  DEVICE_ACCOUNT_STATUS_INACTIVE,
  DEVICE_ACCOUNT_STATUS_ACTIVE,
  DEVICE_OTA_INACTIVE,
  DEVICE_OTA_ACTIVE
} from '@/utils/dictionary'
import { format_dateTime  } from '@/utils/formatter'
import { loadBMap } from '@/utils/utils'
import { BMAP_AK, mapStyle } from '@/utils/config'
import 'echarts/extension/bmap/bmap'

const ShenZhenCenterPoint_Lng = 114.076338
const ShenZhenCenterPoint_Lat = 22.58183
const ShenZhenCenterPoints = [ ShenZhenCenterPoint_Lng, ShenZhenCenterPoint_Lat ]
const MapZoom = 12

export default {
  data () {
    return {
      DEVICE_STATUS_OFFLINE,
      DEVICE_STATUS_ONLINE,
      DEVICE_ACCOUNT_STATUS_INACTIVE,
      DEVICE_ACCOUNT_STATUS_ACTIVE,
      DEVICE_OTA_INACTIVE,
      DEVICE_OTA_ACTIVE,

      map: null,

      id: -1,
      detail: {
        productionName: '',
        appKey: '',
        deviceName: '',
        status: 0,
        accountStatus: 0,
        chargerNum: 0,
        serverTime: null,
        serverTime: 0,
        serverRestartTime: null,
        deviceRunTime: null,

        otaStatus: -1,

        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        eee: '',
        fff: '',
        ggg: '',
      },

      versionList: [],
      versionListLoading: false,

      configList: [],
      configOldList: [],
      configListLoading: false,
      isConfigEditing: false,

      deviceInfoList: [
        { label: '设备硬件版本号', prop: 'aaa' },
        { label: '设备软件版本号', prop: 'bbb' },
        { label: '设备ID', prop: 'ccc' },
      ],
      deviceRegisterInfoList: [
        { label: '设备统一ID', prop: 'ddd' },
        { label: '设备认证密钥', prop: 'eee' },
        { label: '证书类型', prop: 'fff' },
        { label: '数据密钥', prop: 'ggg' },
      ],
      deviceCheckerList: [
        {
          title: '核心设备检查',
          list: [
            { label: '通讯模块', value: '正常' },
            { label: '三相交流电表采集设备 DLT645/NODBUS', value: '正常' },
            { label: '单相交流电表采集设备', value: '正常' },
            { label: '直流电表采集设备', value: '正常' },
            { label: '原桩三相交流电表采集设备', value: '正常' },
            { label: '原桩单相交流电表采集设备', value: '正常' },
            { label: '原桩直流电表采集设备', value: '正常' },
            { label: '温度采集设备', value: '正常' },
            { label: '湿度采集设备', value: '正常' },
            { label: '直流充电通讯采集设备', value: '异常' },
          ]
        },
        {
          title: '上报数据检测',
          list: [
            { label: '三相交流电表采集设备 DLT645/NODBUS', value: '正常' },
            { label: '单相交流电表采集设备 DLT645/NODBUS', value: '正常' },
            { label: '直流电表采集设备', value: '正常' },
            { label: '原桩三相交流电表采集设备', value: '正常' },
            { label: '原桩单相交流电表采集设备', value: '正常' },
            { label: '原桩直流电表采集设备', value: '正常' },
            { label: '温度采集设备', value: '正常' },
            { label: '湿度采集设备', value: '正常' },
            { label: '直流充电通讯采集设备', value: '异常' },
          ]
        }
      ]
    }



  },
  methods: {
    format_dateTime,

    // 地图初始化
    async initMap () {
      try {
        await loadBMap(BMAP_AK)
        
        this.map = this.$echarts.init(this.$refs['map'])
        this.map.setOption({
          bmap: {
            center: ShenZhenCenterPoints,
            zoom: MapZoom,
            roam: true,
            mapStyle
          },
        })

      } catch (err) {
        console.log(err)
      }
    },
    drawMarker ({ lat, lng }) {
      
      var map = this.map.getModel().getComponent('bmap').getBMap();
      console.log(map)
    },
    async getDetail () {
      const params = {
        id: this.id
      }
      // const { data } = await deviceDetailApi(params)
      const data = {
        productionName: '特来示范模块1',
        appKey: 'T1_RM_4G_1P1',
        deviceName: 't1rm4g1p1_001',
        chargerNum: 2,
        status: 0,
        accountStatus: 0,
        serverTime: new Date(),
        serverTimeDiff: 2,
        serverRestartTime: new Date(),
        deviceRunTime: new Date(),

        otaStatus: 1,

        aaa: '1.0.1',
        bbb: '1.0.1',
        ccc: 'ABC2341AB324DEF081',
        ddd: 'AABBD12XXXXXXXX',
        eee: 'ADHGXH07121ADFEFASSE',
        fff: 'X64',
        ggg: 'DLT645/NODBUS',

        lng: 114.076338,
        lat: 22.58183
      }

      this.detail = { ...data }

      this.drawMarker({lat: data.lat, lng: data.lng})
    },

    async getVersionList () {
      this.versionListLoading = true
      try {
        // const { data } = await getVersionListApi()
        const data = [
          { name: '深圳-R2.2.1', edition: '2.2.1', createTime: '2022-11-21T08:11:54.400Z' },
          { name: '深圳-R2.0.0', edition: '2.0.0', createTime: '2022-11-21T08:11:54.400Z' },
          { name: '深圳-R1.0.0', edition: '1.0.0', createTime: '2022-11-21T08:11:54.400Z' },
        ]
        this.versionList = [ ...data ]
      } catch (err) {

      }
      this.versionListLoading = false
    },
    

    async getConfigList () {
      this.configListLoading = true
      try {
        // const { data } = await getConfigListApi()
        const data = [
          { name: '深圳-R2.2.1', value: 0.2 },
          { name: '深圳-R2.0.0', value: 0.2 },
          { name: '深圳-R1.0.0', value: 0.2 },
        ]
        if((data ?? '') !== '') {

          this.configOldList = JSON.parse(JSON.stringify(data))
          this.configList = JSON.parse(JSON.stringify(data))
        }
      } catch (err) {

      }
      this.configListLoading = false
    },
    cancelConfigEditing () {
      this.configOldList.forEach((item, index) => {
        console.log(this.configList[index].value, item.value)
        this.configList[index].value = item.value
      })
      this.isConfigEditing = false
    },
    submitNewConfig () {
      this.isConfigEditing = false
      this.getConfigList()
    },

    // 设备状态 - change
    onDeviceStatusChange (status) {
      switch(status) {
        case DEVICE_STATUS_OFFLINE:
          break
        case DEVICE_STATUS_ONLINE:
          break
      }

    },
    // 设备账户状态 - change
    onAccountStatusChange (status) {
      switch(status) {
        case DEVICE_ACCOUNT_STATUS_INACTIVE:
          break
        case DEVICE_ACCOUNT_STATUS_ACTIVE:
          break
      }

    },
  },
  mounted () {
    const { id } = this.$route.params
    this.id = id

    this.initMap()
    this.getDetail()
    this.getVersionList()
    this.getConfigList()
  }
}
</script>


<style lang="less" scoped>
.controller__page {
  padding: 24px;
  
  .panel {
    background-color: #FFF;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 12px;
    min-height: 120px;
    margin-bottom: 16px;
  }

  .row-1 {
    display: flex;
    justify-content: space-between;
    

    & > div:nth-child(1),
    & > div:nth-child(2) {
      width: calc(40% - 10.7px);
    }
    & > div:nth-child(3) {
      width: calc(20% - 10.7px);
      margin-bottom: 16px;
      .map {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }
    
    /* 设备信息 */
    .deviceInfo {
      display: flex;
      .icon {
        margin-right: 8px;
        .icon-device {
          color: rgba(0, 0, 0, .7);
          font-size: 8rem;
        }
      }
      .info {
        & > div {
          margin-bottom: 12px;
        }
        .label {
          font-size: .8rem;
          color: rgb(127, 127, 127);
        }
        .productionName {
          font-size: 1.2rem;
        }
        .value {
          font-size: .9rem;
          margin-top: 24px;
        }

      }
    }
    /* 设备状态 */
    .deviceStatus {
      display: flex;
      & > div {
        width: 50%;
        display: flex;
        flex-flow: row wrap;
        & > div {
          width: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          
        }
      }
      .deviceStatus__left {
        border-right: 1px solid rgb(235, 235, 235);
        & > div:nth-child(1) {
          flex-flow: column;
          .icon-connector {
            margin-bottom: 4px;
            font-size: 2rem;
          }
        }
        & > div:nth-child(2) {
          font-size: 3rem;
        }
        & > div:nth-child(1),
        & > div:nth-child(3) {
          font-size: .85rem;
        }
        & > div:nth-child(4) {
          font-size: .9rem;
        }
      }
      .deviceStatus__right {
        font-size: .85rem;
        .iconfont {
          font-size: 2.5rem;
          margin-bottom: 4px;
        }
        
        & > div {
          flex-flow: column;
          .icon-online,
          .icon-play {
            color: rgb(103, 194, 58);
          }
          .icon-offline,
          .icon-forbidden {
            color: rgb(245, 108, 108);
          }
          .el-switch {
            margin: 14px 0;
          }
        }
      }
    }

  }
  .row-2 {
    display: flex;
    justify-content: space-between;

    .row-2-left {
      width: calc(65% - 8px);

      /* 设备时间相关的信息 */
      .deviceTime {
        display: flex;
        & > div {
          min-height: 130px;
          width: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          & > div:nth-child(1) {
            height: 90%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            .deviceTime-label {
              font-size: .85rem;
              color: rgb(127, 127, 127);
            }
            .deviceTime-time {
              font-size: 1rem;
              color: #000;
              margin-top: 4px;
            }
            .seconds {
              font-size: 2rem;
              display: inline-block;
              padding: 0 8px;
            }

          }
          & > div:nth-child(2) {
            
            padding-right: 24px;
            .el-button {
              font-size: 1rem;
              height: 70px;
              width: 120px;
              padding-left: 36px;
              position: relative;
              .icon-timer,
              .icon-reset {
                position: absolute;
                top: 8px;
                left: 8px;
                font-size: 1.4rem;
                margin-right: 8px;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
        .deviceTime__left {
          border-right: 1px solid rgb(235, 235, 235);

        }
        .deviceTime__right {
          padding-left: 24px;
          .deviceTime-time-num {
            font-size: 2rem;
          }
        }
      }
      /* 设备版本相关信息 */
      .deviceVersion {
        display: flex;
        & > div {
          width: 50%;
        }

        .deviceVersion__left {
          border-right: 1px solid rgb(235, 235, 235);
          min-height: 140px;
          padding-right: 24px;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          .deviceVersion__left-title {
            font-size: .9rem;
            display: flex;
            justify-content: space-between;
          }
          .deviceVersion__left-currVersion {

            .deviceVersion__left-currVersion-label {
              font-size: .9rem;
              color: rgb(127, 127, 127);
              margin-bottom: 8px;
            }
            .deviceVersion__left-currVersion-version {
              font-size: 2rem;
            }
            .deviceVersion__left-currVersion-time {
              font-size: .9rem;
              color: rgb(127, 127, 127);
            }
          }

        }
        .deviceVersion__right {
          padding-left: 24px;
          .deviceVersion__right-title {
            margin-bottom: 8px;
            .icon-info-circle {
              margin-right: 8px;
            }
          }
          .el-table {
            font-size: .8rem;
          }
        }
      }


      /* 设备配置相关信息 */
      .deviceConfig {
        position: relative;
        .deviceConfig-title {
          font-size: .8rem;
        }
        .deviceConfig-configName {
          font-size: 2rem;
          margin-top: 24px;
        }
        .deviceConfig-createTime {
          font-size: .9rem;
          color: rgb(127, 127, 127);
          margin-top: 12px;
        }
        .deviceConfig-reset-button {
          font-size: 1rem;
          height: 70px;
          width: 150px;
          padding-left: 36px;
          position: absolute;
          right: 24px;
          top: 24px;
          .icon-timer,
          .icon-reset {
            position: absolute;
            top: 8px;
            left: 8px;
            font-size: 1.4rem;
            margin-right: 8px;
            display: inline-block;
            vertical-align: middle;
          }
        }

        /* 设备配置相关信息 - 配置列表 */
        .deviceConfig__configList {
          border: 1px solid rgb(242, 242, 242);
          padding: 8px;
          margin-top: 12px;
          position: relative;
          .deviceConfig__configList-title {
            padding: 24px 0;
            display: flex;
            align-items: center;
            .icon-device {
              font-size: 1.3rem;
            }
          }
          .deviceConfig__configList-actions {
            position: absolute;
            top: 24px;
            right: 24px;
            .icon-submit {
              font-size: .8rem;
              margin-right: 8px;
            }
          }
        }
        
      }
    }
    .row-2-right {
      width: calc(35% - 8px);

      .deviceChecker {
        padding: 24px;
        .actions {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .icon-device {
            display: inline-block;
            margin-right: 6px;
          }
          .icon-download {
            font-size: 1.5rem;
            color: rgba(0, 0, 0, .5);
            cursor: pointer;
            &:hover {
              color: rgba(0, 0, 0, 1);
            }
          }
        }

        .deviceCheckerInfo__item {
          margin-bottom: 12px;
          .deviceCheckerInfo__item-title {
            border-bottom: 1px solid rgb(242, 242, 242);
            padding: 8px 0;
            .title {
              display: flex;
              align-items: center;
              .iconfont {
                font-size: 1.5rem;
                min-width: 32px;
              }
              .text {
                font-size: .9rem;
              }

            }
          }
          .deviceCheckerInfo__item-list {
            .deviceCheckerInfo__item-list-item {
              font-size: .8rem;
              border-bottom: 1px solid rgb(242, 242, 242);
              padding: 8px 32px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .deviceCheckerInfo__item-list-item-label {
                color: rgb(127, 127, 127);
                min-width: 100px;
              }
            }
          }
        }

        

      }
    }
  }
}
</style>